<template>
<!--  手动上传图片-->
  <el-dialog title="更换头像" :visible.sync="showAvatarDialog" width="50%" @close="closeClick">
    <el-upload
      action="https://upload.qiniup.com"
      list-type="picture-card"
      :data="uploadData"
      :auto-upload="false"
      :on-change="changeFile"
      :file-list="fileList"
      :before-upload="beforeUpload"
      accept="image/*"
      ref="upload"
      :on-success="onSuccess"
      :on-error="onError"
    >
      <i slot="default" class="el-icon-plus"></i>
      <div slot="file" slot-scope="{file}">
        <img
          class="el-upload-list__item-thumbnail"
          :src="file.url" alt=""
        >
      </div>
    </el-upload>
    <el-button type="primary" @click="updateClick">更新头像</el-button>
  </el-dialog>
</template>

<script>
import {mapMutations, mapState} from "vuex";
import {getUploadToken} from "@/network/getToken";
import {updateImage} from "@/network/profile/changeAvatar";

export default {
  name: "ChangeAvatarDialog",
  data(){
    return{
      admin:'', //登录的管理员
      uploadData:{  //上传文件的参数
        token:'',
        key:''
      },
      avatarForm:{
        id:'',
        url:''
      },
      fileList:[],  //文件上传的列表
    }
  },
  computed:{
    ...mapState(['showAvatarDialog'])
  },
  methods:{
    closeClick(){
      this.closeAvatarDialog();
    },
    updateClick(){ //点击 更新头像 按钮
      //上传到七牛云
      if(this.fileList.length==0){
        return this.$message.error("请先上传图片！");
      }
      this.$refs.upload.submit();
    },
    //文件上传之前
    beforeUpload(file){
      const index = file.name.lastIndexOf(".");
      this.uploadData.key = this.admin.ad_name+"Avatar"+file.name.substring(index);  //拼凑文件名
      return file.type.indexOf("image")!=-1;  //需要是图片类型
    },
    //上传成功
    onSuccess(file){
      this.avatarForm.url= "http://r08pre7o1.hd-bkt.clouddn.com/"+file.key;
      updateImage(this.avatarForm).then(res=>{
        if(res.data.status==200){
          this.$message.success("头像更新成功！");
          this.fileList=[];
          this.admin.ad_image = this.avatarForm.url;
          window.localStorage.setItem("admin",JSON.stringify(this.admin));  //更新storage
          this.changeAvatar(this.avatarForm.url);
          this.closeAvatarDialog();
        }else if(res.data.status==300){
          return this.$message.error("图片路径有误，请重新操作！");
        }else if(res.data.status==501){
          return this.$message.error("新头像和旧头像路径一致，请重新操作！");
        }else{
          return this.$message.error("修改头像失败，请重新操作！");
        }
      })
    },
    //上传失败
    onError(){
      this.$message.error("头像更新失败，请重新操作！");
    },
    changeFile(file,fileList){
      if(fileList.length>0){
        this.fileList = [fileList[fileList.length-1]];
      }
    },

    ...mapMutations(['closeAvatarDialog','changeAvatar']),
  },
  created() {
    getUploadToken().then(res=>{
      if(res.data.status==200){
        this.uploadData.token = res.data.data;
      }
    })
    this.admin = JSON.parse(window.localStorage.getItem("admin"));
    this.avatarForm.id = this.admin.ad_id;
  }
}
</script>

<style scoped>
.upload-div{
  position: relative;
}
.avatar-uploader {
  width: 178px;
  height: 178px;
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.hasImage{
  opacity: 0;
}
.el-button{
  margin-top: 30px;
}
/deep/ .el-list-enter-active,
/deep/ .el-list-leave-active {
  transition: none;
}

/deep/ .el-list-enter,
/deep/ .el-list-leave-active {
  opacity: 0;
}
</style>
